<template>
  <div class="container" style="width:99%;margin-top:-25px;">
    <!-- 查询条件 -->
    <div class="query-box">
      <el-form :model="queryBox" status-icon ref="queryBox">
        <el-row>
          <el-col :span="4">
            <el-form-item label prop="code">
              <el-input v-model="queryBox.code" placeholder="请输入分中心代码">
                <template slot="prepend">分中心代码</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">分中心名称</div>
              <el-autocomplete
                v-model="branchCenterName"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入内容"
                @select="handleSelect"
              ></el-autocomplete>
            </div>
          </el-col>
          <el-col :span="4">
            <el-form-item label prop="headmaster">
              <el-input v-model="queryBox.headmaster" placeholder="请输入校长姓名">
                <template slot="prepend">校长姓名</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label prop="phone">
              <el-input v-model="queryBox.phone" placeholder="请输入手机号码">
                <template slot="prepend">手机号码</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <!-- <el-form-item label="" prop="signRep">
                <el-input v-model="queryBox.signRep" placeholder="请输入大区经理">
                    <template slot="prepend">大区经理</template>
                </el-input>
            </el-form-item>-->
            <div class="depart-box">
              <div class="slect-title">大区经理</div>
              <el-autocomplete
                v-model="queryBox.signRep"
                :fetch-suggestions="querySearchAsync2"
                placeholder="请输入内容"
                @select="handleSelect2"
                clearable
              ></el-autocomplete>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">状态</div>
              <el-select clearable v-model="queryBox.isOpenRecycle" filterable>
                <el-option
                  v-for="item in isopen"
                  :key="item.lable"
                  :label="item.value"
                  :value="item.label"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="16">
            <el-row class="area">
              <el-col :span="4">
                <span class="city-title">签约地区：</span>
              </el-col>
              <el-col :span="8" style="margin-left:-1px">
                <el-form-item label prop="area">
                  <el-cascader clearable size="large" :options="options" v-model="selectedOptions"></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <div class="from-btns">
        <kt-button
          :label="$t('action.reset')"
          perms="true"
          type="primary"
          @click="reset('queryBox')"
        />
        <kt-button
          :label="$t('action.search')"
          perms="true"
          type="primary"
          @click="subcentersearch"
        />
      </div>
    </div>
    <!-- 新增分中心按钮-->
    <div class="add-btns">
      <kt-button
        :label="$t('action.newaddsubcener')"
        perms="customerownership:subcentercustomer:add"
        type="primary"
        @click="newaddsubcener"
      />
    </div>
    <!--表格内容栏-->
    <CrmTable
      class="table-width"
      SubcentercustomerSeaConfig
      :showBatchDelete="false"
      :loading="loading"
      @findPage="findPage"
      :data="pageResult"
      :columns="columns"
      @changeSwitch="changeSwitch"
    ></CrmTable>

    <!--新增编辑界面-->
    <el-dialog
      :title="operation?'新增分中心':''"
      width="40%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="newaddcenter"
        label-width="80px"
        ref="newaddcenter"
        :size="size"
        label-position="right"
      >
        <el-row>
          <el-col :span="24">
            <el-col :span="5">
              <span style="display:inline-block;margin-top:7%">分中心编码:</span>
            </el-col>
            <el-col :span="19">
              <el-input v-model="branchCenterCode" placeholder="请输入分中心编码" auto-complete="off"></el-input>
            </el-col>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="addbrCustomer"
          :loading="editLoading"
        >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import { regionDataPlus } from "element-china-area-data";
import axios from "axios";
export default {
  name: "Subcentercustomer",
  components: {
    CrmTable,
    KtButton,
    CrmSwitch
  },
  data() {
    return {
      size: "small",
      // filters: {
      //   name: ""
      // },
      // 查询条件
      queryBox: {
        code: "",
        name: "",
        headmaster: "",
        phone: "",
        signRep: "",
        isOpenValue: "",
        areaCode: "",
        providerAgent: "",
        isOpen:'',
        isOpenRecycle:''
      },
      loading: false,
      branchCenterName: "",
      isOpen1: "",
      isOpen2: "",
      isopen: [
        {
          value: "启用",
          label: "1"
        },
        {
          value: "停用",
          label: "2"
        }
      ],
      //   地区
      options: regionDataPlus,
      selectedOptions: [],
      columns: [
        { type: "index", label: "序号", minWidth: 20 },
        { prop: "code", label: "分中心代码", minWidth: 80 },
        { prop: "name", label: "分中心名称", minWidth: 100 },
        { prop: "headmaster", label: "校长名称", minWidth: 30 },
        { prop: "phone", label: "手机号码", minWidth: 50 },
        // { prop: "signRep", label: "大区经理", minWidth: 100 },
        { prop: "area", label: "签约地区", minWidth: 100 },
        // { prop: "state", label: "状态", minWidth: 30 }
        // { prop: "role", label: "客户进展", minWidth: 70 },
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {
        content: []
      },
      branchCenterCode: "",
      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,
      dataFormRules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }]
      },
      // 新增编辑界面数据
      newaddcenter: {
        subcenternumber: ""
      },
      deptData: [],
      deptTreeProps: {
        label: "name",
        children: "children"
      },
      roles: []
    };
  },
  methods: {
    // 加载用户角色信息
    findUserRoles: function() {
      this.$api.role.findAll().then(res => {
        // 加载角色集合
        this.roles = res.data;
      });
    },
    // 启用停用
    changeSwitch: function(data) {
      this.$api.ownship
          .branchCenterOpen({
            branchCenterId: data.row.branchCenterId,
            id: data.row.id,
            isOpenRecycle:data.row.isOpenRecycle
          }).then(res=>{
            if(res.result==1){
              this.$message({ message: res.msg, type: "success" });
            }else{
              this.$message({ message: res.msg, type: "error" });
            }           
          })
    },
 

    // 重置
    reset(queryBox) {
      this.$refs.queryBox.resetFields();
      this.queryBox.isOpen = "";
      this.selectedOptions = [];
      this.queryBox.areaCode = "";
      this.queryBox.province = "";
      this.queryBox.city = "";
      this.queryBox.area = "";
      this.queryBox.providerAgent=''
      this.branchCenterName=''
      this.queryBox.signRep=''
      this.pageRequest.pageNum = 1;
      this.queryBox.isOpenRecycle=''
      this.findPage(null);
    },
    // 显示新增界面
    newaddsubcener: function() {
      this.dialogVisible = true;
      this.operation = true;
      this.dataForm = {
        id: 0
      };
    },
    // 菜单树选中
    deptTreeCurrentChangeHandle(data, node) {
      this.dataForm.deptId = data.id;
      this.dataForm.deptName = data.name;
    },
    // 菜单树选中
    handleOptionClick() {},
    // 获取列表
    findPage: function(data) {
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.$api.student
        .branchCenterAssignStrategy(this.queryBox)
        .then(res => {
          let content = {
            content: res.bCAssignStrategyInfoList,
            totalSize: res.total
          };
          this.pageResult = content;
          this.pageResult.content.forEach(item => {
            item.state = item.isOpen == 1 ? "解锁" : "锁定";
          });
          this.pageResult.content.forEach(v => {
            // switch (v.isOpen) {
            //   case "2":
            //     this.isOpen1 == "2";
            //     this.isOpen2 == "2";
            //     break;
            //   case "1":
            //     this.isOpen1 == "1";
            //     this.isOpen2 == "2";
            //     break;
            //   case "3":
            //     this.isOpen1 == "2";
            //     this.isOpen2 == "1";
            //     break;
            // }
            if(v.isOpen==2){
                v.isOpen1='2'
                v.isOpen2='2'
            }else if(v.isOpen==1){
              v.isOpen1='1'
              v.isOpen2='2'
            }else if(v.isOpen==3){
              v.isOpen1='2'
              v.isOpen2='1'
            }
            // console.log(v)
          });
          this.loading = false;
        })
        .then(data != null ? data.callback : "");
    },
    // 添加分中心
    addbrCustomer() {
      this.$api.ownship
        .addbranchCenterAssignStrategy({
          branchCenterCode: this.branchCenterCode
        })
        .then(res => {
          if (res.result == 1) {
            this.$message({ message: res.msg, type: "success" });
            this.dialogVisible = false;
            this.operation = false;
            this.findPage(null);
          } else if (res.result == 2) {
            this.$message({ message: res.msg, type: "error" });
          }
        });
    },
    // 查询
    subcentersearch() {
      this.loading = true;
      this.queryBox.province = this.selectedOptions[0];
      this.queryBox.city = this.selectedOptions[1];
      this.queryBox.areaCode = this.selectedOptions[2];
      // let areaCode=this.selectedOptions[2]
      // this.queryBox.areaCode=areaCode
      this.findPage(null);
    },
    // 分中心远程搜索
    querySearchAsync(queryString, callback) {
      let restaurants = [{}];
      let results = "";
      this.$api.dropdown.branchcenter().then(res => {
        for (let i of res.branchCenterInfoList) {
          i.value = i.name; //将想要展示的数据作为value
        }
        restaurants = res.branchCenterInfoList;
        results = queryString
          ? restaurants.filter(this.createFilter(queryString))
          : restaurants;
        callback(results);
      });
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      this.queryBox.providerAgent = item.id;
    },

    // 大区经理远程搜索
    querySearchAsync2(queryString, callback) {
      let restaurants = [{}];
      let results = "";
      this.$api.student.querySignRep().then(res => {
        let signRepListJson = [];
        for (let i = 0; i < res.signRepList.length; i++) {
          let j = {};
          j.name = res.signRepList[i];
          signRepListJson.push(j);
        }
        for (let i of signRepListJson) {
          i.value = i.name; //将想要展示的数据作为value
        }
        restaurants = signRepListJson;
        results = queryString
          ? restaurants.filter(this.createFilter2(queryString))
          : restaurants;
        callback(results);
      });
    },
    createFilter2(queryString) {
      return restaurant => {
        return (
          restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect2(item) {
      this.queryBox.signRep = item.name;
    }
  },
  mounted() {}
};
</script>
<style >
@import url("../../assets/queryBox.css");
</style>
<style lang='scss' scope>
.add-btns .el-button:nth-child(1) {
  margin-right: 10px;
}
.city-title {
  text-align: right;
  float: left;
  display: block;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #f5f7fa;
  color: #909399;
  display: table-cell;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  line-height: 37px;
  white-space: nowrap;
  font-size: 14px;
  display: inline-table;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding: 0 9%;
  margin-right: -18%;
}
.el-row .el-col {
  margin-left: 0;
}
</style>


